﻿require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojnavigationlist', 'ojs/ojswitch', 'ojs/ojradioset',
'ojs/ojbutton', 'ojs/ojdialog', 'ojs/ojaccordion', 'ojs/ojcollapsible', 'ojs/ojconveyorbelt', 'ojs/ojoffcanvas', 'ojs/ojdatacollection-common',
'ojs/ojtoolbar'],
function (oj, ko, $)
    // this callback gets executed when all required modules are loaded
{
    $(function () {
        function ViewModel() {
            // observable for large screens
            var lgQuery = oj.ResponsiveUtils.getFrameworkQuery(
                                    oj.ResponsiveUtils.FRAMEWORK_QUERY_KEY.MD_UP);
            this.large = oj.ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);

            var self = this;

            //
            // Button used for toggling off screen data.
            //
            var offScreenDataButton = {
                "label": "offscreen-toggle",
                "iconClass": "oj-web-applayout-offcanvas-icon",
                "url": "#"
            };

            self.appDrawer =
                    {
                        "edge": "start",
                        "displayMode": "push",
                        "selector": "#appDrawer",
                        "selection": "selectedItem",
                        "content": '#pageContent'
                    };

            self.toggleAppDrawer = function () {
                
                 return oj.OffcanvasUtils.open(self.appDrawer);
            };

            //
            // Close off-screen content once window becomes larger.
            //
            var query = window.matchMedia("(min-width: 39.375rem)");
            var mqListener = function (event) {
                oj.OffcanvasUtils.close(self.appDrawer);
            };
            query.addListener(mqListener);

            $("#appDrawer").focusout(function () {
                oj.OffcanvasUtils.close(self.appDrawer);
            });

        }
        var vm = new ViewModel();

        ko.applyBindings(vm, document.getElementById('navigation'));
    });

    $(function () {
        function dialogModel() {
            
            var self = this;
            self.handleOpen = $("#buttonOpener").click(function () {
                $("#modalDialog1").ojDialog("open");
            });

            self.handleOKClose = $("#okButton").click(function () {
                $("#globalAppAboutDialog").ojDialog("close");
            });
        }

        ko.applyBindings(new dialogModel(), document.getElementById('globalAppAboutDialog'));
    });

    $(function () {
        ko.applyBindings(null, document.getElementById('ossLicensesList'))
   });
});